import React  from 'react';
import PropTypes from 'proptypes';
import { withStyles } from '@mui/styles';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
const styles = theme => ({
  close: {
    // padding: theme.spacing(2),
  },
});
function Loading(props){
  const [state,setState]=React.useState({ active: false });
  // state = { active: false };
  // static propTypes = {
  //   message: PropTypes.string,
  //   type: PropTypes.string,
  //   inverted: PropTypes.bool,
  // };
  React.useEffect(()=>{
    setState({ active: true });
    return ()=>{
      setState({ active: false });
    }
  },[]);
  handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setState({ active: false });
  };
    const { message,classes } = props;
    return (
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={state.active}
        autoHideDuration={6000}
        onClose={handleClose}
        ContentProps={{
          'aria-describedby': 'message-id',
        }}
        message={<span id="message-id">{message}</span>}
        action={[
          <Button
            key="undo"
            color="secondary"
            size="small"
            onClick={handleClose}
          >
            UNDO
          </Button>,
          <IconButton
            key="close"
            aria-label="Close"
            color="inherit"
            className={classes.close}
            onClick={handleClose}
          >
            <CloseIcon />
          </IconButton>,
        ]}
      />
    );
}
Loading.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Loading);
